<template>
   <swiper :options = "swiperOption" class="swiper">
      <swiper-slide v-for="(item, index) in swiperImgs" :key = "index" class="swiper-slide">
          <img class="swiper-slide-img" :src="item" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
   </swiper>
</template>

<script>
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  data () {
    return {
      swiperOption: {
        autoplay: true,
        autoHeight: true,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          bulletClass: 'cd'
        }
      }
    }
  },
  props: {
    height: {
      type: String,
      default: 'auto'
    },
    swiperImgs: {
      type: Array,
      requird: true
    },
    /**
     * 1、圆点切换
     * 2、数字
     */
    paginationType: {
      type: String,
      default: '1'
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  created () {
    this.initPaginationLayout()
  },
  methods: {
    /**
     * 根据分页器类型配置对应的分页器
     */
    initPaginationLayout () {
      switch (this.paginationType) {
        // 圆点分页器
        case '1':
          this.swiperOption.pagination = {
            el: '.swiper-pagination',
            type: 'bullets',
            bulletClass: 'cd'
          }
          break
        case '2':
          this.swiperOption.pagination = {
            el: '.swiper-pagination',
            type: 'fraction'
          }
          break
      }
    }
  }
}
</script>

<style lang="scss">
@import '@css/style.scss';
  .swiper{
    width: 100%;
    &-slide{
      width: 100%;
      &-img{
        width: 100%;
      }
    }
  }
  // 圆点分页器
  .swiper-pagination {
    bottom: px2rem(12);
    .cd {
      box-sizing: border-box;
      border-radius: 100%;
      height: px2rem(6);
      width: px2rem(6);
      border: px2rem(1) solid #fff;
      margin: 0 px2rem(4);
      display: inline-block;
      opacity: 1;
    }
    .swiper-pagination-bullet-active {
      background-color: #fff;
    }
  }
  // 数字分页器
  .swiper-pagination-fraction {
    left: auto;
    right: 0;
    width: auto;
    font-size: $infoSize;
    background-color: rgba(0,0,0,0.3);
    padding: px2rem(6) px2rem(18);
    border-top-left-radius: px2rem(16);
    border-bottom-left-radius: px2rem(16);
    bottom: px2rem(32);
    color: white;

    .swiper-pagination-current {
      font-size: $titleSize;
      font-weight: bold;
    }
  }
</style>
